<template>
  <div class="pages commisson">
    <template v-if='isShop == "0"'>
      <template v-if='!sub'>
        <div class='main-select-plan'>
          <el-row style="margin-bottom: 20px;margin-left: 20px;" v-if='actionPlanType == null'>
            <el-col :span="12">
              <h4><span class='start-icon'>*</span>请先选择门店提成方案</h4>
              <p class="tips">温馨提示：门店实施员工提成制度需要先选择提成方案，提成方案选择后开始执行提成制度</p>
            </el-col>
          </el-row>
          <el-row style='margin-bottom: 20px' type='flex' justify='between-space'>
            <el-col style='padding-left: 20px;'>
              <el-radio-group v-model="planType" class="btn" @change="planTypeChange">
                <el-radio class='select-planType-btn' :label="index" v-for="(item, index) in planeList" :key="index"
                          border>
                  <span class="plan-type-title">{{item.title}}</span>
                  <span class="plan-type-des" v-if="item.subtitle">{{item.subtitle}}</span>
                </el-radio>
              </el-radio-group>
            </el-col>
            <el-col style='padding-right: 55px;text-align: right;width: 200px;' v-if='actionPlanType != null'>
              <el-button type="primary" plain @click='routerTo'>方案修改记录</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col class='mt20' v-if='actionPlanType == null' style='margin-bottom: 20px;text-align: center;'>
              <el-button class='determine-btn' type='primary' @click='activateAlert' :disabled='planType == null'>确认选择
              </el-button>
            </el-col>
          </el-row>
        </div>
        <template>
          <el-row class='mt20 mr10'>
            <product-piece :actionPlanType='actionPlanType' :planType.sync='planType' ref='childPiece'></product-piece>
          </el-row>
          <el-row class='mr10'>
            <person-achievement :actionPlanType='actionPlanType' :planType.sync='planType' ref='childPerson'></person-achievement>
          </el-row>
          <el-row v-if='(planType == "2" && actionPlanType == null) || actionPlanType == "2"'>
            <h2 class='no-plane'>暂不执行提成制度！</h2>
          </el-row>
        </template>
      </template>
      <template v-else>
        <router-view></router-view>
      </template>
    </template>
    <h3 v-else>非门店商户无法访问</h3>
  </div>
</template>
<script>
  import personAchievement from './staff-commission-compontent/person-achievement-commission'
  import productPiece from './staff-commission-compontent/product-piece-commission'
  import {mapState} from 'vuex'
  import u from '@/util'
  import {
    getCommercialTenant,
    activate,
  } from '@/api'

  export default {
    components: {
      'person-achievement': personAchievement,
      productPiece
    },
    name: 'staff-commission',
    computed: mapState(['merchantId', 'power', 'businessScope', 'sub', 'companyName', 'isShop']),  //0-商品售卖 1-服务预约 2-小儿游泳
    data () {
      return {
        planType: null,
        actionPlanType: null,  //正在执行的提成方案
        pageSize: 10,
        pageNum: 1,
        planeList: [{
          title: '产品常规计件提成',
          subtitle: '按员工个人所售产品计件提成'
        }, {
          title: '个人业绩阶梯提成',
          subtitle: '按员工个人销售业绩阶梯提成'
        }, {
          title: '暂不执行提成制度',
        }]
      }
    },
    mounted () {
      this.getCommercialTenant()
    },
    methods: {
      //激活提成方案
      activate () {
        let data = {
          shopId: this.merchantId,
          planType: this.planType,
          shopName: this.companyName
        }
        activate(data).then(res => {
          if (res.code == 200) {
            this.getCommercialTenant(this.planType)
          } else {
            this.planType = this.actionPlanType
          }
        })
      },
      activateAlert () {
        if (this.planType == '2') {
          this.activate()
        } else {
          let planName = this.planType == '0' ? '产品常规计件提成' : '个人业绩阶梯提成'
          this.$confirm('您确认本门店开始实施【' + planName + '】方案吗?', '确认选择', {
            confirmButtonText: '确认选择',
            cancelButtonText: '我再想想',
            showClose: false,
            center: true,
            closeOnPressEscape: false,
            closeOnHashChange: false,
            closeOnClickModal: false
          }).then(() => {
            this.activate()
          }).catch(() => {
          })
        }
      },
      //查询商户提成方案
      getCommercialTenant (planType = '') {
        let data = {
          shopId: this.merchantId,
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          planType: planType
        }
        getCommercialTenant(data).then(res => {
          if (!res.data) {
            this.planType = null
            this.actionPlanType = null
          } else {
            this.planType = res.data.planType
            this.actionPlanType = res.data.planType
          }
          if (this.actionPlanType == '1' || (this.actionPlanType == null && this.planType == '1')) {
            this.$refs.childPerson.initData(this.actionPlanType, this.planType)
          }
          if (this.actionPlanType == '0' || (this.actionPlanType == null && this.planType == '0')) {
            this.$refs.childPiece.initData(this.actionPlanType, this.planType)
          }
        })
      },

      planTypeChange (val) {
        let tip1 = ''
        let tip2 = ''
        if (val == this.actionPlanType) {
          return
        }
        if (this.actionPlanType != null) {
          if (val == '2') {
            tip1 = '您确认要停止执行提成制度吗？'
            tip2 = '停止后将不统计员工提成'
          } else {
            let planName = val == '0' ? '产品常规计件提成' : '个人业绩阶梯提成'
            tip1 = '您确认要切换为【' + planName + '】方案吗？'
            tip2 = '切换后提成方式将按照新方案执行'
          }
          const h = this.$createElement
          this.$msgbox({
            title: '确认切换',
            message: h('div', null, [
              h('p', null, tip1),
              h('p', null, tip2)
            ]),
            showCancelButton: true,
            confirmButtonText: '确 认',
            cancelButtonText: '我再想想',
            showClose: false,
            center: true,
            closeOnPressEscape: false,
            closeOnHashChange: false,
            closeOnClickModal: false
          }).then(() => {
            this.activate()
          }).catch(() => {
            this.planType = this.actionPlanType
          })
        }
        // else {
        //   //未选择方案，切换方案查看
        //   if (this.planType == '1') {
        //     this.$refs.childPerson.initData(null, this.planType)
        //   }
        //   if (this.planType == '0') {
        //     this.$refs.childPiece.initData(null, this.planType)
        //   }
        // }
      },
      routerTo () {
        u.routerTo('/operate-management/staff-management/staff-commission/modify-record')
      }
    }
  }
</script>

<style scoped lang='less'>
  .commisson {
    padding-top: 20px;

    .tips {
      font-size: 14px;
      color: #f56c6c;
      margin-top: 5px;
      margin-left: 18px;
    }
    .plan-type-title {
      font-weight: bold;
      color:rgba(96,98,102,1);
      font-size: 14px!important;
    }
    .plan-type-des {
      display: block;
      margin-top: 12px;
      font-size: 12px;
      color:rgba(96,98,102,1);
    }

    .determine-btn {
      width: 200px;
    }

    .no-plane {
      padding-left: 360px;
      margin-top: 100px;

    }
  }

  .mt20 {
    margin-top: 20px;
  }

  .mr10 {
    margin-right: 10px;
  }
  .start-icon {
    color: #f56c6c;
    margin-right: 10px;
  }
  .main-select-plan {
    background: #FFFFFF;
    padding-top: 20px;
  }
</style>
<style lang='less'>
  .btn {
    display: flex!important;
    display: -webkit-flex!important;
    justify-content: flex-start;
    align-items: stretch;

    .el-radio-button__inner {
      width: 300px;
      min-height: 58px;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
    }
  }

  .el-message-box__content {
    padding: 20px 15px 24px;
  }

  .select-planType-btn {
    height: auto!important;
    padding: 15px 0 15px 10px!important;
    width: 220px;
    .el-radio__label {
      display: inline-block;
    }
    .el-radio__input {
      vertical-align: top;
    }
    &.is-checked {
      .plan-type-title {
        color: #409EFF!important;
      }
      .plan-type-des {
        color:#409EFF!important;
      }
    }
  }
</style>
